<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer"/>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>小黑记事本</title>
    <link rel="stylesheet" href="记事本css/index.css">
</head>
<body>
<!-- 主体区域 -->
    <section id='todoapp'>
        <!-- 输入框 -->
        <header class="header">
            <h1>小黑记事本</h1>
<!-- autocomplete 属性规定输入字段是否应该启用自动完成功能。on是开 off是关
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。-->
            <input type="text"   @keydown.enter="getData" v-model="data" autocomplete="off" placeholder="请输入任务" class="new-todo" >
        </header>
        <!-- 列表区域 -->
        <section class="main">
            <ul class="todo-list">
                <li class="todo" v-for="(value,index) in inputArray">
                    <div class="view">
                        <span class="index">{{index+1}}</span>
                        <label>{{value}}</label>
                        <button class="destroy" @click="removeData(index)"></button>
                    </div>
                </li>
            </ul>
        </section>
        <!-- 统计和清空 -->
        <footer class="footer" >
<!-- 如果不等于0就显示否则就隐藏-->
            <span class="todo-count" v-show="inputArray.length!=0">
              <strong>{{inputArray.length}}</strong> items left
            </span>
            <button class="clear-completed" @click="clearData" v-if="inputArray.length!=0">
              Clear
            </button>
        </footer>
    </section>
<script>
    var todoapp=new Vue({
        el:"#todoapp",
        data:{
            data:"",
            inputArray:[
                "吃饭饭",
                "睡觉觉",
                "打豆豆",
                "恶心心",
            ],
        },
        methods:{
            getData:function () {
                this.inputArray.push(this.data)
            },
            removeData:function (i){
                //通过索引删除元素 splice() 从哪里删删几个
                this.inputArray.splice(i,1)
            },
            //数组清空
            clearData:function () {
                 this.inputArray=[]
            }
        }
    })
</script>
</body>
</html>